import React, { useState, useEffect } from 'react'
import { Alert, Timeline, Card, Space } from 'antd'
import { 
  NotificationOutlined, 
  ClockCircleOutlined,
  InfoCircleOutlined,
  CheckCircleOutlined 
} from '@ant-design/icons'

const AnnouncementBanner: React.FC = () => {
  const [welcomeVisible, setWelcomeVisible] = useState(true)
  const [updateVisible, setUpdateVisible] = useState(true)

  useEffect(() => {
    const welcomeClosed = localStorage.getItem('welcome-banner-closed')
    const updateClosed = localStorage.getItem('update-banner-closed')
    
    if (welcomeClosed === 'true') {
      setWelcomeVisible(false)
    }
    if (updateClosed === 'true') {
      setUpdateVisible(false)
    }
  }, [])

  const handleWelcomeClose = () => {
    setWelcomeVisible(false)
    localStorage.setItem('welcome-banner-closed', 'true')
  }

  const handleUpdateClose = () => {
    setUpdateVisible(false)
    localStorage.setItem('update-banner-closed', 'true')
  }

  const announcements = [
    {
      time: '2025-01-17 10:00',
      content: '系统已升级至最新版本 v2.0',
      type: 'success',
      icon: <CheckCircleOutlined className="text-green-500" />
    },
    {
      time: '2025-01-16 15:30',
      content: '新增AI智能写作助手功能',
      type: 'info',
      icon: <InfoCircleOutlined className="text-blue-500" />
    },
    {
      time: '2025-01-15 09:00',
      content: '计划维护通知：本周六凌晨2点-4点',
      type: 'warning',
      icon: <ClockCircleOutlined className="text-orange-500" />
    }
  ]

  return (
    <Space direction="vertical" size="middle" className="w-full">
      {welcomeVisible && (
        <Alert
          message="欢迎使用AI写作平台"
          description="开始您的创作之旅，探索智能写作的无限可能！如需帮助，请查看帮助文档或联系客服。"
          type="info"
          showIcon
          icon={<NotificationOutlined />}
          closable
          onClose={handleWelcomeClose}
          className="shadow-sm"
        />
      )}

      {updateVisible && (
        <Alert
          message="系统更新"
          description="平台已更新至最新版本，新增多项功能优化，提升您的使用体验。"
          type="success"
          showIcon
          closable
          onClose={handleUpdateClose}
          className="shadow-sm"
        />
      )}

      <Card 
        title={
          <Space>
            <NotificationOutlined />
            <span>系统通知</span>
          </Space>
        }
        className="shadow-sm"
        bodyStyle={{ padding: '16px 24px' }}
      >
        <Timeline
          items={announcements.map(item => ({
            dot: item.icon,
            children: (
              <div>
                <p className="mb-1 font-medium">{item.content}</p>
                <p className="text-gray-400 text-xs">{item.time}</p>
              </div>
            )
          }))}
        />
      </Card>
    </Space>
  )
}

export default React.memo(AnnouncementBanner)

export { AnnouncementBanner }